<template>
      <el-card class="card" :body-style="{padding:'10px'}" :style="{'background-color':color,'width':width}">
      <div class="card-content">
          <div class="card-content-left">
              <img class="card-content-left-image" :src="image"></img>
          </div>
          <div class="card-content-right">
              <div class="card-content-right-top">
                  <span>{{title}}</span>
              </div>
              <div class="card-content-right-bottom">
                  <span>{{detail}}</span>
              </div>
          </div>
      </div>
      </el-card>
</template>

<script>
export default {
name:"SmallCard",
props:{
    image:"",
    title:"",
    detail:"",
    color:"",
    width:""
},
data(){
    return{

    }
}
}
</script>

<style scoped>
.card{
width: 300px;
height: 80px;
padding: 20px;
margin-right: 10px;
/* background-color: #fff; */
    /* background-color: aqua; */
}
.card-content{
    display: flex;
    justify-content: space-between;
}
.card-content-left{
width:80px;
    height: 60px;
}
.card-content-left-image{
    width:60px;
    height: 60px;
    /* border-radius: 100%; */
}
.card-content-right{
    font-weight: 700;
}
.card-content-right-top{
    line-height: 18px;
    color: rgba(0,0,0,.45);
    font-size: 16px;
    margin-bottom: 12px;
}
.card-content-right-bottom{
    font-size: 20px;
}
</style>